<template>
	<view class="wallet">
		<section class="wallet-header">
			<view class="user-info">
				<img src="/static/orders/icon_avatar_default.svg" class="user-avatar" alt="" />
				<view class="user-info-right">
					<view class="info-cell">
						余额: ￥0
					</view>
					<view class="info-cell">
						<span style="font-size: 26rpx;">
							交易记录
							<img src="/static/index/next_mini.png" style="width: 5px;height: 9px;margin-left: 5px;" />
						</span>
						<span style="font-size: 26rpx;margin-left: 25rpx;">
							兑换储值
							<img src="/static/index/next_mini.png" style="width:5px;height: 9px;margin-left: 5px;" />
						</span>
					</view>
					
				</view>
			</view>
		</section>
		
		<section class="wallet-content">
			<view class="charge-box">
				<view class="charge-cell charge-cell-auto">
					<view class="charge-label">充值</view>
					<up-input
					    placeholder="请输入数值(元)"
					    border="bottom"
						type="number"
					    @change="handle_charge_input"
					  ></up-input>
				</view>
				
				<view class="charge-cell charge-cell-fixed">
					<view :class="current_charge_option_index == (_index+1) ? 'charge-item active' : 'charge-item'" v-for="(_item, _index) in charge_options" :key="_index" @click="handle_select_charge_option(_item, _index)">
						{{ _item.text }}
					</view>
				</view>
			</view>
			
			<view class="charge-desc">
				<view class="charge-desc-title">
					使用说明
				</view>
				<view class="charge-desc-text">
					会员储值可享受优惠活动
				</view>
			</view>
			
			<view class="charge-btn-box">
				<view class="charge-btn">
					<up-button 
						color="#333333"  
						:disabled="charge_amount == 0 || !charge_amount"
						@click="handle_charge_now" 
						:customStyle="{height: '100%',borderRadius: '60rpx'}" 
						text="立即充值"></up-button>
				</view>
			</view>
		</section>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	const charge_options = ref([
		{value: 10, text: "10元", sub_text: ""},
		{value: 50, text: "50元", sub_text: ""},
		{value: 100, text: "100元", sub_text: ""},
		{value: 200, text: "200元", sub_text: ""},
		{value: 500, text: "500元", sub_text: ""},
		{value: 1000, text: "1000元", sub_text: ""},
		{value: 1500, text: "1500元", sub_text: ""},
		{value: 2000, text: "2000元", sub_text: ""},
	])
	
	const icon_avatar = ref("/static/orders/icon_avatar_default.svg");
	
	const charge_amount = ref(0);
	const current_charge_option_index = ref(0)
	
	
	// 用户手动输入充值金额
	const handle_charge_input = (val) => {
		charge_amount.value = val
		current_charge_option_index.value = 0
	}
	// 选择固定充值选项
	const handle_select_charge_option = (item, index) => {
		charge_amount.value = item.value
		current_charge_option_index.value = index+1
	}
	
	// 立即充值 调起微信授权支付
	const handle_charge_now = () => {
		console.log("charge_amount: ")
		console.log(charge_amount.value)
		console.log("current_charge_option_index: ")
		console.log(current_charge_option_index.value)
	}
</script>

<style lang="scss" scoped>
	.wallet{
		width: 100%;
		height: 100vh;
		
		.wallet-header{
			width: 100%;
			height: fit-content;
			background-color: #333333;
			padding: 80rpx 60rpx;
			box-sizing: border-box;
			
			.user-info{
				width: 70%;
				height: 120rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				.user-avatar{
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}
				
				.user-info-right{
					width: calc(100% - 120rpx - 20rpx);
					height: 90rpx;
					display: flex;;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 30rpx;
					
					.info-cell{
						width: 100%;
						height: fit-content;
						display: flex;
						justify-content: flex-start;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
			
		}
		
		.wallet-content{
			width: 100%;
			height: calc(100vh - 280rpx);
			background-color: #f3f4f6;
			border-radius: 60rpx 60rpx 0 0;
			
			.charge-box{
				width: 100%;
				height: fit-content;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				
				.charge-cell{
					width: 100%;
					height: fit-content;
					
					
				}
				.charge-cell-auto{
					display: flex;;
					align-items: center;;
					justify-content: flex-start;
					
					.charge-label{
						font-size: 28rpx;
						color: #333333;
						margin-right: 20rpx;
					}
					
				}
				
				.charge-cell-fixed{
					width: 100%;
					height: fit-content;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					padding-top: 50rpx;
					
					.charge-item{
						width: 130rpx;
						height: 110rpx;
						display: flex;
						align-items: center;;
						justify-content: center;;
						font-size: 28rpx;
						color: #333333;
						letter-spacing: 2rpx;
						border-radius: 8rpx;
						border: 1px solid #333333;
						transition: 0.3s;
						margin: 0 15rpx 20rpx 15rpx
					}
					
					.charge-item.active{
						background-color: #333333;
						color: #fff;
					}
					
				}
			}
			
			.charge-desc{
				width: 100%;
				padding: 40rpx 40rpx 70rpx;
				box-sizing: border-box;;
				background-color: #fff;

				.charge-desc-title{
					font-size: 30rpx;
					color: #333333;
					font-weight: 550;
				}
				.charge-desc-text{
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}
			}
			
			
			.charge-btn-box{
				position: fixed;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				display: flex;;
				justify-content: center;;
				align-items: center;
				
				.charge-btn{
					width: 260rpx;
					height: 70rpx;
				}
			}
			
		}
	}
</style>